<template>
  <div class="regist_container">
    <div class="regist_box">
      <h3 class="regist_title">
        <i class="el-icon-edit">请填写您的个人信息</i>
      </h3>
      <label class="tip">* 为必填项</label>
      <el-form class="regist_form" :model="registForm" ref="registForm" :rules="rules" status-icon label-position="right" label-width="80px">
        <el-form-item label="昵称" prop="username">
          <el-input v-model="registForm.username" placeholder="请输入昵称，长度不超过10个字符"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="registForm.password" type="password" placeholder="请输入密码，长度限制 6 ~ 16 位"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input v-model="registForm.confirmPwd" type="password" placeholder="请输入确认密码，与密码保持一致"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="registForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱号" prop="email">
          <el-input v-model="registForm.email" placeholder="请输入邮箱号（选填）"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="registForm.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
            <el-radio :label="3">未知</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker v-model="registForm.birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期（选填）"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm" :disabled="registAlready">{{regist}}</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <el-link type="info" @click="goLogin" class="login_link">返回登录</el-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isClick: false,
      regist: '确认注册',
      registForm: {
        username: 'dd',
        password: '123456',
        confirmPwd: '123456',
        phone: '13120867934',
        email: '',
        gender: 3,
        birthday: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        confirmPwd: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(17[013678])|(18[0,5-9]))\d{8}$/, message: '请输入正确手机号', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    registAlready() {
      return this.isClick
    }
  },
  methods: {
    submitForm() {
      this.isClick = true
      this.regist = '注册中...'
      setTimeout(() => {
        this.$refs.registForm.validate(async valid => {
          if (!valid) return
          const { data: res } = await this.$http.post('/user/regist', this.registForm)
          if (res.code === 200) {
            this.$message({
              message: '恭喜你，注册成功！',
              type: 'success',
              center: true,
              offset: 225,
              duration: 1000,
              onClose: () => {
                this.$router.push('/login')
              }
            })
          } else {
            this.$messagebox.alert(res.msg, '注册失败', {
              confirmButtonText: '确定'
            })
          }
        })
        this.isClick = false
        this.regist = '确认注册'
      }, 1000)
    },
    resetForm() {
      this.$refs.registForm.resetFields()
    },
    goLogin() {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.regist_container {
  background-color: #f4f5f7;
  height: 100%;
}

.regist_box {
  width: 450px;
  height: 600px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.regist_form {
  position: absolute;
  width: 100%;
  padding: 0 50px;
  top: 10%;
  box-sizing: border-box;
}

.regist_title {
  color: #409eff;
  font-size: 18px;
  text-align: center;
}

.tip {
  color: #f56c6c;
  font-size: 10px;
  position: absolute;
  top: 5%;
  left: 3%;
}

.login_link {
  position: absolute;
  right: 5%;
  bottom: 5%;
}
</style>
